import * as echarts from 'echarts'
import type { EChartsOption, ECharts } from 'echarts'
type DataType = {
  name: string
  value: number
}[]
export default class PieChart {
  defaultOption: EChartsOption = {
    title: {
      text: '累计确诊',
      left: '25%',
      top: '10%',
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)',
    },
    series: [
      {
        id: 'ser-pie',
        name: '累计确诊',
        type: 'pie',
        radius: ['50', ' 50%'],
        center: ['30%', '50%'],
        // width:'80%',
        // height:'80%',
        // roseType: 'area',
        itemStyle: {
          borderRadius: 5,
        },
        data: [{ name: '中国地区', value: 0 }],
      },
    ],
  }
  // series = [
  //   {
  //     id: 'ser-pie',
  //     name: '累计确诊',
  //     type: 'pie',
  //     radius: ['50', ' 50%'],
  //     center: ['30%', '50%'],
  //     // width:'80%',
  //     // height:'80%',
  //     // roseType: 'area',
  //     itemStyle: {
  //       borderRadius: 5,
  //     },
  //     data: [],
  //   },
  // ]
  private _el: HTMLElement | null = null
  instance: ECharts | null = null
  constructor(el: HTMLElement) {
    this._el = el
    this.instance
      ? this.instance.clear()
      : (this.instance = echarts.init(this._el))
    this.initPieChart(this._el, this.defaultOption)
  }
  initPieChart(el=this._el, options: EChartsOption=this.defaultOption) {
    this.instance ? this.instance.clear(): (this.instance = echarts.init(el!, options))
    this.instance.setOption(options)
  }
  updateData(data: DataType) {
    // this.instance?.setOption({ series: [{ id: 'ser-pie' ,data:[]}] })
    this.instance?.setOption({ series: [{ id: 'ser-pie', data: data }] })
  }
}
